<template>
	<view class="page">
		<wd-form ref="formRef" :model="formData">
			<wd-cell-group border>
				<wd-input
					label="原密码"
					label-width="60px"
					prop="oldPassword"
					show-password
					clearable
					v-model="formData.oldPassword"
					placeholder=""
					:rules="[
						{ required: true, message: '请输入原密码' },
						{ required: false, pattern: /^.{3,}$/, message: '密码最少3位' },
						{ required: false, pattern: /^.{0,20}$/, message: '密码最多20位' },
						{
							required: false,
							pattern: /^[a-zA-Z0-9_]+$/,
							message: '密码由字母和数字组成',
						},
					]"
				/>
				<wd-input
					label="新密码"
					label-width="60px"
					prop="newPassword"
					show-password
					clearable
					v-model="formData.newPassword"
					placeholder="请输入新的密码"
					:rules="[
						{ required: true, message: '请输入新的密码' },
						{ required: false, pattern: /^.{3,}$/, message: '密码最少3位' },
						{ required: false, pattern: /^.{0,20}$/, message: '密码最多20位' },
						{
							required: false,
							pattern: /^[a-zA-Z0-9_]+$/,
							message: '密码由字母和数字组成',
						},
					]"
				/>
				<wd-input
					label="新密码"
					label-width="60px"
					prop="repeatPassword"
					show-password
					clearable
					v-model="formData.repeatPassword"
					placeholder="请再次输入新的密码"
					:rules="[
						{ required: true, message: '请输入新的密码' },
						{ required: false, pattern: /^.{3,}$/, message: '密码最少3位' },
						{ required: false, pattern: /^.{0,20}$/, message: '密码最多20位' },
						{
							required: false,
							pattern: /^[a-zA-Z0-9_]+$/,
							message: '密码由字母和数字组成',
						},
						{
							required: false,
							validator: repeatPasswordValidator,
							message: '两次输入的密码不一致',
						},
					]"
				/>
			</wd-cell-group>
		</wd-form>

		<view class="footer">
			<wd-button type="info" @tap="onCancel">取消</wd-button>
			<view class="gap"></view>
			<wd-button type="primary" @tap="onSubmit">提交</wd-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

import { useUserApis } from '../../request/user.api';
import { showSuccessToast } from '../../utils/toast.utils';

const userApis = useUserApis();
const formRef = ref();

const formData = ref({
	oldPassword: '',
	newPassword: '',
	repeatPassword: '',
});

// 校验2次密码输入一致
const repeatPasswordValidator = (val) => {
	console.log('repeatPasswordValidator', val);
	if (String(val) !== formData.value.newPassword) return Promise.reject('密码不一致');
	return Promise.resolve();
};

const onSubmit = async () => {
	const { valid } = await formRef.value.validate();
	if (!valid) return;

	console.log('formData', formData.value);

	await userApis.changePassword({
		oldPassword: formData.value.oldPassword,
		newPassword: formData.value.newPassword,
	});

	showSuccessToast();
	uni.navigateBack();
};
const onCancel = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.page {
	width: 100%;
	height: 100%;
	padding: 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer {
	display: flex;
}

.wd-button {
	flex: 1;
}

.gap {
	width: 32rpx;
}
</style>
